{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap/css/bootstrap.css' %}">
    <style>
        .box {
            width: 450px;
            border: 1px solid #f0f0f0;
            margin-left: auto;
            margin-right: auto;
            margin-top: 100px;

            padding-left: 40px;
            padding-right: 40px;
            padding-bottom: 30px;

            box-shadow: 5px 10px 10px rgb(0 0 0 / 5%);
        }
    </style>
</head>
<body>

<div class="box">
    <h2 style="text-align: center;">手机号登录</h2>
    <form method="post" id="Sms_form">
        {% csrf_token %}
        <div class="form-group" style="position: relative;margin-bottom: 25px">
            <label>{{ form.role.label }}</label>
            {{ form.role }}
            <span style="color: red;position: absolute;">{{ form.role.errors.0 }}</span>
        </div>
        <div class="form-group" style="position: relative;margin-bottom: 25px">
            <label>{{ form.mobile.label }}</label>
            {{ form.mobile }}
            <span style="color: red;position: absolute;" class="error">{{ form.mobile.errors.0 }}</span>
        </div>
        <label>{{ form.code.label }}</label>
        <div class="row" style="margin-bottom: 20px">
            <div class="col-lg-8">
                {{ form.code }}
                <span style="color: red;position: absolute;" class="error">{{ form.code.errors.0 }}</span>
            </div>
            <div class="col-lg-4">
                <button type="button" id="sendBtn" class="btn btn-success">发送验证码</button>
            </div>
        </div>
        <button type="button" id="smsLoginBtn" class="btn btn-primary">登 录</button>
        <a href='{% url 'login' %}' style="float: right;">用户名登录</a>
    </form>
</div>
<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<script>
    $(function (){
        SendBtn()
        SmsLogin()
    })
    function SendBtn(){
        $("#sendBtn").click(function (){
            $(".error").empty()
            $.ajax({
                url :"{% url 'sms_code' %}",
                dataType : 'json',
                data : $("#Sms_form").serialize(),
                type : "POST",
                success : function (res){
                    if(res.status){
                        SendCode()
                    }else {
                        $.each(res.detail,function (k,v){
                            $("#id_"+k).next().text(v[0])
                        })

                    }
                }
                })
    })
    }
    function SendCode(){
        $("#sendBtn").prop('disabled',true)
            var time = 60
            var ID = setInterval(function (){
                $("#sendBtn").text(time+"秒后重新发送")
                console.log(time)
                time = time - 1
                if(time<=0){
                    clearInterval(ID)
                    $("#sendBtn").prop('disabled',false)
                    $("#sendBtn").text("发送验证码")
                }
            },1000)
    }
    function SmsLogin(){
        $("#smsLoginBtn").click(function (){
            $(".error").empty()
            $.ajax({
                url : "{% url 'sms_login' %}",
                type: "POST",
                dataType: "json",
                data: $("#Sms_form").serialize(),
            {#    $("#Sms_form").serialize()的作用是将表单#Sms_form中的数据序列化为一个字符串，#}
            {#以便通过 AJAX 发送到服务器。它会将表单中的所有字段名称和值进行编码，#}
            {#以key1=value1&key2=value2这种形式的字符串表示，例如role=1&mobile=13812345678&code=123456。#}
                success:function (res){
                    if(res.status){
                        location.href = res.data
                    }else {
                        $.each(res.detail,function (k,v){
                            $("#id_"+k).next().text(v[0])
                        })
                    }
                }
            })
        })
    }

</script>
</body>
</html>
